<script setup name="skucardttem">
import { initSkuCardItem } from "@/composables/useSku"

const props = defineProps({
  skuCardId: [String, Number]
})

// 解构获取初始化规格值方法
const { item, loading, inputValue, inputVisible, InputRef, handleClose, showInput, handleInputConfirm, handleChange } = initSkuCardItem(props.skuCardId)
</script>

<template>
  <div v-loading="loading">
    <el-tag v-for="(tag, index) in item.goodsSkusCardValue" :key="index" closable :disable-transitions="false" @close="handleClose(tag)" effect="plain">
      <el-input v-model="tag.text" placeholder="选项值" size="small" @change="handleChange($event, tag)"></el-input>
    </el-tag>
    <el-input class="tag-input" v-if="inputVisible" ref="InputRef" v-model="inputValue" size="small" @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
    <el-button v-else size="small" @click="showInput">+</el-button>
  </div>
</template>

<style lang="scss" scoped>
.el-tag {
  padding: 0;
  margin-right: 4px;
  width: 68px;
  :deep(.el-tag__close) {
    margin: 0 6px;
  }
}
.tag-input {
  width: 64px;
}
</style>
